<template>
    <div class="home-item-area">
        <div class="app-row">
            <div class="home-column">
                <div class="col-12"><img src="./../assets/chrimast-08-mobile.jpg" /><span class="col-row">Locket Necklaces</span></div>
            </div>
            <div class="home-column">
                <div class="col-6"><img src="./../assets/01.jpg" /><p>Charms</p></div>
                <div class="col-6"><img src="./../assets/02.jpg" /><p>Bracelets</p></div>
            </div>
            <div class="home-column">
                <div class="col-6"><img src="./../assets/03.jpg" /><p>Rings</p></div>
                <div class="col-6"><img src="./../assets/04.jpg" /><p>Necklaces</p></div>
            </div>
            <div class="home-column-max">
                <div class="col-12"><img src="./../assets/chrimast-09-mobile.jpg" /><span class="col-row">Engraved Bracelets</span></div>
            </div>
        </div>    
        <div class="bootm">
            <div class="title_text">{{ title_text }}</div>
            <div class="products-list" v-for="(item,i) in a_Products" :key="i">
               <router-link :to="{name:'Vproduct',query:{id:item.sku,price:item.price,originPrice:item.originPrice,totalReviews:item.totalReviews}}"></router-link>
                <div class="img">
                    <img :src="item.image" alt="">
                </div>
                <div class="details-area">
                    <h2>{{item.title}}</h2>
                    <p><span>{{item.price}}</span><span>{{item.originPrice}}</span></p>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import {getAutumnSale} from './../ajax/api.js'
export default {
    name:'',
    data(){
        return {  
            primaryKey:0,
            a_Products:[{
                "image":'',
                "price":'',
                "originPrice":'',
                "title":''
            }],
            title_text:''
        }
    },
    created: function () {
        this.loadData();
    },
    methods: {
        async loadData() {
            await getAutumnSale(this.primaryKey)
                .then(({code,message,data}) => {
                //console.log({code,message,data});                
                console.log(data.meetings);
                this.a_Products = data.meetings[0].products;     
                this.title_text = data.meetings[0].title;
            })
            .catch(error => {
                if (error) {
                    console.log("getAutumnSale", {
                    error
                });
                }
            })            
        }
    }
}
</script>
<style>
.home-banner{width: 100%;overflow: hidden;position: relative;}
.home-banner img {width: 100%;}
.swiper-pagination-bullet-active{background: #000;}
.app-row{position: relative;margin-top: 20px;}
.home-column{padding: 0 10px;text-align: left;}
.home-item-area .col-12{position: relative;}
.home-item-area img {width: 100%;height: 100%;}
.home-item-area .col-row{position: absolute;bottom: 45%;z-index: 1;left: 20px;color: #000;font-weight: 900;font-size: 16px;}
.home-item-area p{text-align: left;margin: 0;font-size: 0.6rem;color: #000;}
.home-column-max{width: 100%;margin-top:10px;}
.home-column .col-12{height: 150px;margin-bottom: 5px;}
.home-column .col-6:nth-of-type(even){margin-left: 1px}
.home-column .col-6{width: 49%;display:inline-block;margin-bottom: 5px;}
.home-column-max .col-12{width: 100%;height: 150px;}
.bootm{text-align: left;display: flex;flex-flow: wrap;justify-content: space-between;padding: 8px;}
.bootm .products-list{width: calc(50% - 4px ); display: inline-block;text-align: center;margin-bottom: 15px;position: relative;}
.bootm .products-list h2{font-size: 12px;color: #000;height: 14px;overflow: hidden;text-align: left;margin-bottom: 0.4rem;}
.bootm .products-list p span{padding: 0 2px;font-size: 0.8rem;}
.bootm .products-list p span:nth-child(1){font-weight: 900;color: #000;}
.bootm .products-list p span:nth-child(2){text-decoration: line-through;color: #ccc;}
.bootm .title_text{width: 100%;text-align: left;margin: 5px 0 10px;font-weight: 900;}
.products-list a{position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 1;}
</style>
